<template>
  <div>
    <div>
      <h4>疼痛</h4>
      <el-row>
        <el-col>
          <span>1.在平坦的地面上行走：</span>
          <el-select v-model="pgForm.womac_value1" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col>
          <span>2.上楼梯或者下楼梯：</span>
          <el-select v-model="pgForm.womac_value2" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col>
          <span>3.晚上，尤其影响睡眠的疼痛：</span>
          <el-select v-model="pgForm.womac_value3" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col>
          <span>4.坐着或躺着：</span>
          <el-select v-model="pgForm.womac_value4" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
      </el-row>
      <h4>僵硬</h4>
      <el-row>
        <el-col>
          <span>5.挺直身体站立：</span>
          <el-select v-model="pgForm.womac_value5" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col>
          <span>6.早晨起床僵硬程度：</span>
          <el-select v-model="pgForm.womac_value6" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
      </el-row>
      <h4>进行日常生活的难度</h4>
      <el-row>
        <el-col>
          <span>7.僵硬在以后时间：</span>
          <el-select v-model="pgForm.womac_value7" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col>
          <span>8.上楼梯：</span>
          <el-select v-model="pgForm.womac_value8" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col>
          <span>9.下楼梯：</span>
          <el-select v-model="pgForm.womac_value9" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col>
          <span>10.由坐着站起来：</span>
          <el-select v-model="pgForm.womac_value10" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col>
          <span>11.站着：</span>
          <el-select v-model="pgForm.womac_value11" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col>
          <span>12.向地面弯腰：</span>
          <el-select v-model="pgForm.womac_value12" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col>
          <span>13.在平坦的地面上行走：</span>
          <el-select v-model="pgForm.womac_value13" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col>
          <span>14.进出小轿车或上下公交车：</span>
          <el-select v-model="pgForm.womac_value14" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col>
          <span>15.出门购物：</span>
          <el-select v-model="pgForm.womac_value15" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col>
          <span>16.穿袜子：</span>
          <el-select v-model="pgForm.womac_value16" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col>
          <span>17.由床上站起来：</span>
          <el-select v-model="pgForm.womac_value17" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col>
          <span>18.脱掉袜子：</span>
          <el-select v-model="pgForm.womac_value18" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col>
          <span>19.躺在床上：</span>
          <el-select v-model="pgForm.womac_value19" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col>
          <span>20.进出浴缸：</span>
          <el-select v-model="pgForm.womac_value20" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col>
          <span>21.坐着的时候：</span>
          <el-select v-model="pgForm.womac_value21" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col>
          <span>22.在卫生间蹲下或站起来：</span>
          <el-select v-model="pgForm.womac_value22" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col>
          <span>23.做繁重的家务活时：</span>
          <el-select v-model="pgForm.womac_value23" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col>
          <span>24.做轻松的家务活时：</span>
          <el-select v-model="pgForm.womac_value24" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
      </el-row>
      <el-row>
        <span>总分：</span>
        <el-input v-model="pgForm.womac_input" placeholder="" readonly style="width: 10%;"></el-input>
        <span> 分</span>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: "womac",
  title: "WOMAC评分",
  created() {
    if(this.istrans){
      this.pgForm=this.fromdata
    }
  },
  props: {
    fromdata:{},
    istrans:false,
  },
  data(){
    return {
      pgForm: {
        womac_value1: '',
        womac_value2: '',
        womac_value3: '',
        womac_value4: '',
        womac_value5: '',
        womac_value6: '',
        womac_value7: '',
        womac_value8: '',
        womac_value9: '',
        womac_value10: '',
        womac_value11: '',
        womac_value12: '',
        womac_value13: '',
        womac_value14: '',
        womac_value15: '',
        womac_value16: '',
        womac_value17: '',
        womac_value18: '',
        womac_value19: '',
        womac_value20: '',
        womac_value21: '',
        womac_value22: '',
        womac_value23: '',
        womac_value24: '',
        womac_input: ''
      },
      options: [
        {
          value: '0',
          label: '0'
        },
        {
          value: '1',
          label: '1'
        },
        {
          value: '2',
          label: '2'
        },
        {
          value: '3',
          label: '3'
        },
        {
          value: '4',
          label: '4'
        },
        {
          value: '5',
          label: '5'
        },
        {
          value: '6',
          label: '6'
        },
        {
          value: '7',
          label: '7'
        },
        {
          value: '8',
          label: '8'
        },
        {
          value: '9',
          label: '9'
        },
        {
          value: '10',
          label: '10'
        },
      ],
    }
  },
  computed:{
    sum:{
      get(){
        return (this.pgForm.womac_value1)*1+(this.pgForm.womac_value2)*1+(this.pgForm.womac_value3)*1+(this.pgForm.womac_value4)*1+(this.pgForm.womac_value5)*1+(this.pgForm.womac_value6)*1+(this.pgForm.womac_value7)*1+(this.pgForm.womac_value8)*1+(this.pgForm.womac_value9)*1+(this.pgForm.womac_value10)*1+(this.pgForm.womac_value11)*1+(this.pgForm.womac_value12)*1+(this.pgForm.womac_value13)*1+(this.pgForm.womac_value14)*1+(this.pgForm.womac_value15)*1+(this.pgForm.womac_value16)*1+(this.pgForm.womac_value17)*1+(this.pgForm.womac_value18)*1+(this.pgForm.womac_value19)*1+(this.pgForm.womac_value20)*1+(this.pgForm.womac_value21)*1+(this.pgForm.womac_value22)*1+(this.pgForm.womac_value23)*1+(this.pgForm.womac_value24)*1
      },
      set(val){}
    },
  },
  watch: {
    sum(val){
      this.pgForm.womac_input = val
    },
  },
}
</script>

<style scoped>
.el-row {
  margin: 10px 0;
  padding: 20px 10px;
  background-color: #f9f9f9;
}
.el-select{
  width: 10%;
  margin-bottom: 20px;
}


</style>
